import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import { useCallback, useEffect, useState } from 'react'

export const ConfirmationDialog = ({
	open,
	title,
	description,
	onConfirm,
	onClose
}: {
	open: boolean
	title: string
	description?: string
	onConfirm: () => void
	onClose?: () => void
}) => {
	const [isOpened, setIsOpened] = useState(false)

	const handleClose = useCallback(() => {
		if (onClose) onClose()
		setIsOpened(false)
	}, [onClose])

	const handleConfirm = useCallback(() => {
		onConfirm()
		setIsOpened(false)
	}, [onConfirm])

	useEffect(() => setIsOpened(open), [open])

	return (
		<Dialog
			open={isOpened}
			onClose={onClose}
			aria-labelledby='alert-dialog-title'
			aria-describedby='alert-dialog-description'
		>
			<DialogTitle id='alert-dialog-title'>{title}</DialogTitle>
			{description && (
				<DialogContent>
					<DialogContentText id='alert-dialog-description'>
						{description}
					</DialogContentText>
				</DialogContent>
			)}
			<DialogActions>
				<Button
					onClick={handleClose}
					color='primary'
				>
					Отмена
				</Button>
				<Button
					onClick={handleConfirm}
					color='secondary'
					autoFocus
				>
					Подтвердить
				</Button>
			</DialogActions>
		</Dialog>
	)
}
